<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        #box{
            height: 200px;width: 400px;margin: 100px auto;
            border: 1px solid red;position: relative;
        }
        #box ul li{
            font-size: 50px;color: white;text-align: center;
           line-height: 200px;background: #990055;
            list-style: none;height: 200px;display: none;
        }
        #box ul li.active{
            display: block;
        }
        #circle{
            position: absolute;bottom: 0px;left: 145px;
        }
        #circle p{
            height: 20px;width: 20px;float: left;cursor: pointer;
            margin: 0px 5px;border-radius: 10px; background: #55a532;
        }
        #circle p.active{
            background: red;
        }
        #prev,#next{
            height: 40px;width: 30px;background: rgba(0,0,0,.5);font-size: 30px;display: none;
            color: white;position: absolute;top: 80px;border: 1px solid rgba(0,0,0,.5);
        }
        #prev{left: 0px}
        #next{right: 0px}
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="circle">
            <p class="active"></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <button id="prev">&lt;</button>
        <button id="next">&gt;</button>
    </div>
    <script type="text/javascript">
        var num = 0;

        var box = document.getElementById("box");
        var circle = document.getElementById("circle");

        var liArr = box.getElementsByTagName("li");
        var pArr = circle.getElementsByTagName("p");

        var next = document.getElementById("next")
        var prev = document.getElementById("prev")

        box.onmouseover = function(){
            clearInterval(timer);
            next.style.display = "block"
            prev.style.display = "block"

        }
        box.onmouseout = function(){
            timer = setInterval(startMove,1500);
            next.style.display = "none"
            prev.style.display = "none"
        }




        next.onclick = startMove;
        prev.onclick = startMoveUp

        var timer = setInterval(startMove,1500);
        //实现图片自动轮播(和小球)
        function startMove() {
            num++;
            if(num==liArr.length){
                num = 0;
            }
            for (var i=0;i<liArr.length;i++){
                liArr[i].className = "";
                pArr[i].className = "";
            }
            liArr[num].className = "active";
            pArr[num].className = "active";
        }

        function startMoveUp() {
            num--;
            if(num<0){
               num = liArr.length-1;
            }
            for (var i=0;i<liArr.length;i++){
                liArr[i].className = "";
                pArr[i].className = "";
            }
            liArr[num].className = "active";
            pArr[num].className = "active";
        }


    //给小圆圈加上点击事件
        for(var a=0;a<pArr.length;a++){
            pArr[a].b = a;
            pArr[a].onclick = function () {
                num = this.b;
                for (var i=0;i<liArr.length;i++){
                    liArr[i].className = "";
                    pArr[i].className = "";

                }
                liArr[this.b].className = "active";
                pArr[this.b].className = "active";
            }
        }



    </script>

</body>
</html>